<template>
  <article 
    id="impress"
    :data-transition-duration="duration"
    :data-width="width"
    :data-height="height"
    :data-max-scale="maxScale"
    :data-min-scale="minScale"
    :data-perspective="perspective"
    ref="impress"
  >
    <slot></slot>
  </article>
</template>
<script>
import impress from "exports-loader?window.impress!impress.js"
import "impress.js/css/impress-common.css"
export default {
  props: {
    duration: {
      type: Number,
      default: 600
    },
    width: {
      type: Number,
      default: 1024
    },
    height: {
      type: Number,
      default: 768
    },
    maxScale: {
      type: Number,
      default: 3
    },
    minScale: {
      type: Number,
      default: 0
    },
    perspective: {
      type: Number,
      default: 1000
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.$children.forEach((page,i) => {
        const el = page.$el
        const name = page.name
        const rule = this.rules[name] || []
        for (let [key,value] of rule) {
           el.setAttribute(key, value)
        }
        const line = Math.floor(i / 5)
        if (line % 2 === 0) {
          el.setAttribute("data-x", (i % 5) * this.width)
        } else {
          el.setAttribute("data-x", (4 - i % 5) * this.width)
        }
        
        el.setAttribute("data-y", line * this.height)
        el.setAttribute("data-desc", page.desc)
        if (el.id === 'overview') {
          const row =  Math.ceil((this.$children.length -1) / 5)
          el.setAttribute("data-x", 2 * this.width)
          el.setAttribute("data-y", this.height * row / 2)
          el.setAttribute("data-scale", 5);
        }
        el.classList.add("step")
    })
    this.impress = impress()
    this.impress.init()
  },
  methods: {
    getImpressInstance() {
      return this.impress
    }
  }
  
}
</script>